<template>
  <div class='container' >
<el-card class="box-card"  style='position: relative;'>
  <el-button-group :style="{'padding-top':'40px'}" >
  <el-button
  @click="$router.push('new')"
  type="success"  size="small" style='position: absolute;right:10px;top:14px;'>
    <i class="el-icon-edit"></i>
    新增试题</el-button>
  </el-button-group>
    <el-form ref="sizeForm" :model="sizeForm" label-width="80px" size="small" >
  <el-row>
 <el-col :span="6">
    <el-form-item label="学科">
    <el-select  v-model="sizeForm.subject" placeholder="请选择">
      <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.subject"
      :value="item.subject"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="二级目录">
    <el-select v-model="sizeForm.catalog" placeholder="请选择">
  <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.catalog"
      :value="item.catalog"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="标签">
    <el-select v-model="sizeForm.tags" placeholder="请选择">
 <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.tags"
      :value="item.tags"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="关键字">
   <el-input v-model="page.keyword" placeholder="根据题干搜索" maxlength="10"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="试题类型">
    <el-select v-model="sizeForm.questionType" placeholder="请选择">
       <el-option
      v-for="item in questionType"
      :key="item.value"
      :label="item.label"
      :value="item.label"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="难度">
    <el-select v-model="sizeForm.difficulty" placeholder="请选择">
     <el-option
      v-for="item in difficulty"
      :key="item.value"
      :label="item.label"
      :value="item.label"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="方向">
    <el-select v-model="sizeForm.direction" placeholder="请选择">
     <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.direction"
      :value="item.direction"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="录入人">
    <el-select v-model="sizeForm.creatorID" placeholder="请选择">
     <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.creatorID"
      :value="item.creatorID"
      >
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
    <el-col :span="6">
    <el-form-item label="题目备注">
   <el-input v-model="sizeForm.remarks"></el-input>
  </el-form-item>
  </el-col>
    <el-col :span="6">
    <el-form-item label="企业简称">
   <el-input v-model="sizeForm.region"></el-input>
  </el-form-item>
  </el-col>
 <el-col :span="6">
  <el-form-item label="城市">
    <el-col :span="11">
     <el-select v-model="sizeForm.province">
         <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.province"
      :value="item.province"
      >
      </el-option>
     </el-select>
    </el-col>
    <el-col :span="11">
         <el-select v-model="sizeForm.city">
      <el-option
      v-for="item in add.items"
      :key="item.value"
      :label="item.city"
      :value="item.city"
      >
      </el-option>
         </el-select>
    </el-col>
  </el-form-item>
 </el-col>
  <el-col :span="6">
    <el-form-item style="float:right">
    <el-button type="primary" @click="submitForm('sizeForm')">清除</el-button>
    <el-button @click="resetForm('ruleForm')">搜索</el-button>
  </el-form-item>
  </el-col>
  </el-row>
</el-form>
<el-row>
  <el-col :span="24" ><div class="grid-content bg-purple-dark">
    数据一共{{page.total}}条
    </div></el-col>
</el-row>

 <el-table style="padding-top:20px" :data="add.items">
          <el-table-column label="试题编号" prop="number" />
          <el-table-column label="学科"  prop="subject"/>
          <el-table-column label="目录"  prop="catalogID"/>
          <el-table-column label="题型" prop="questionType" :formatter="formatEmployment"/>
          <el-table-column label="题干"  width="260px" prop="question"/>
          <el-table-column label="录入时间" width="160px" prop="addDate"/>
          <el-table-column label="难度"  prop="difficulty" :formatter="formatEmployments"/>
          <el-table-column label="录入人" prop="creator"/>
          <el-table-column label="操作"   width="270" >
            <template slot-scope="scope">
               <el-button @click="ph(scope.row)" type="primary" plain size="small" icon="el-icon-view" circle></el-button>
              <el-button   @click="$router.push('new')" type="success" plain size="small" icon="el-icon-edit" circle></el-button>
              <el-button @click="btn(scope.row.id)" type="danger" plain size="small" icon="el-icon-delete" circle></el-button>
              <el-button @click="jx(scope.row.id)" type="warning" plain size="small" icon="el-icon-check" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
         <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <div class="block">
   <el-pagination
      :current-page="page.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
         @current-change="handleCurrentChange"
      :total="page.total">
    </el-pagination>
  </div>
        </el-row>
</el-card>
<ArticlesAddd :flag="showlog" :newdata="newdata"/>
  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import ArticlesAddd from '../components/articles-addd.vue'
export default {
  components: {
    ArticlesAddd
  },
  data () {
    return {
      sizeForm: {
        subject: '',
        catalog: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        province: '',
        city: '',
        remarks: '',
        region: ''
      },
      add: [], // 基础题库列表
      getdata: [], // 基础题库详情
      page: {
        page: 1,
        pagesize: 5,
        total: 0,
        keyword: '', // 关键字
        subject: ''
      },
      showlog: false,
      newdata: {},
      questionType: '',
      difficulty: ''
    }
  },
  methods: {
    formatEmployment (row, column, cellValue, index) {
      console.log(row.questionType)
      if (row.questionType === '1') {
        return '单选'
      } else if (row.questionType === '2') {
        return '多选'
      } else {
        return '简单'
      }
    },
    formatEmployments (row, column, cellValue, index) {
      console.log(row.questionType)
      if (row.questionType === '1') {
        return '简单'
      } else if (row.questionType === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    async list () {
      const { data } = await list(this.page)
      console.log(data)
      this.add = data
      this.page.total = data.counts
    },
    handleCurrentChange (newpage) {
      console.log(newpage)
      this.page.page = newpage
      this.list()
    },
    async btn (id) {
      try {
        await this.$confirm('你确定要删除吗？')
        await remove({ id })
        this.list()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    async  jx (id) {
      try {
        await this.$confirm('你确定要添加吗？')
        await choiceAdd({ id, choiceState: 1 })
        this.list()
        this.$message.success('加入精选成功')
      } catch (error) {
        console.log(error)
      }
    },
    submitForm () {
      this.sizeForm = {
        subject: '',
        catalog: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        province: '',
        city: '',
        remarks: '',
        region: ''
      }
      this.page.keyword = ''
    },
    async ph (id) {
      this.showlog = true
      const { data } = await detail(id)
      console.log(data)
      this.newdata = data
    },
    resetForm () {
      this.list()
    }

  },
  created () {
    this.list()
    this.questionType = questionType
    this.difficulty = difficulty
  }
}
</script>

<style scoped >

  .bg-purple-dark {
    background: #f4f4f5;
  }
    .grid-content {
    border-radius: 4px;
    min-height: 35px;
    line-height: 35px;
    border-radius: 4px;
  }
  .box-card{
    height:1000px
  }
</style>
